<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::commonlinks(~{::title},~{::link})">
    <title>个人资料</title>
    <link rel="stylesheet" th:href="@{/admin/user/index.css}">
    <link rel="stylesheet" th:href="@{/plugins/bootstrap-fileinput/css/fileinput.min.css}">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper">
    <div th:include="common/header::topnavbar"></div>
    <div th:include="common/header::leftaside(activename='user')"></div>
    <!-- 内容区 -->
    <div class="content-wrapper">
        <!--内容区头部 -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-1">
                    <div class="col-md-6">
                        <h3 class="m-1 text-dark">个人资料</h3>
                    </div><!-- /.col -->
                </div><!-- /.row -->
                <hr>
                <div class="row mb-1">
                    <div class="col-md-2 text-center">
                        <div class="image">
                            <img th:src="@{${userVO.img}}" class="img-circle elevation-1 img-fluid"
                                 height=auto alt="User Image">
                        </div>
                        <div class=" mt-2" id="inputimg"><a data-toggle="modal" href="#imgmodal">修改头像</a></div>
                    </div>
                    <div class="col-md-10">
                        <div class="row mt-5 mb-5">
                            <div class="col-md-10 align-self-center d-flex">
                                <div class="col-md-2"><i class="fa-bell fas"><span> 关注:<span th:text="${userVO.followingNumber}">0</span></span></i></div>
                                <div class="col-md-2"><i class="fa-heart fas"><span> 粉丝:<span th:text="${userVO.followedNumber}">0</span></span></i></div>
                                <div class="col-md-2"><i class="fa-star fas"><span> 收藏:<span th:text="${userVO.collectNumber}">0</span></span></i></div>
                            </div>
                            <div class="col-md-2 text-right">
                                <a th:href="${'/unAuthorize/blogger?id='+userVO.id}"><span>个人主页 》</span></a>
                            </div><!-- /.col -->
                        </div>
                        <hr>
                        <div class="row mb-1">
                            <div class="col-md-10 flex-column d-flex" >
                                <div class="mt-2 mb-2"><span >用户名: <span th:text="${userVO.username}" name="username">未填写</span></span></div>
                                <div class="mt-2 mb-2"><span>邮箱: <span th:text="${userVO.email}">未填写</span></span></div>
                                <div class="mt-2 mb-2"><span>账号: <span th:text="${userVO.email}">未填写</span></span></div>
                                <div class="mt-2 mb-2"><span>学历: <span th:text="${userVO.education}">未填写</span></span></div>
                                <div class="mt-2 mb-2"><span>学校: <span th:text="${userVO.school}">未填写</span></span></div>
                                <div class="mt-2 mb-2"><span>个人简介: <span th:text="${userVO.content}">未填写</span></span></div>
                            </div>
                            <div class="col-md-2 text-right">
                                <a href="#msgmodal" data-toggle="modal"><span>修改资料</span></a>
                            </div><!-- /.col -->
                        </div>

                    </div>
                </div><!-- /.row -->
            </div> <!-- /.container-fluid -->
        </div>
        <!-- /内容区头部 -->
    </div>
    <!-- /内容区 -->
    <!-- 右侧栏 -->
    <div th:include="~{common/header::rightaside}"></div>
    <!-- /右侧栏 -->
    <!-- 底部栏 -->
    <div th:include="~{common/footer::footer}"></div>
    <div id="imgmodal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">修改头像</h4>
                    <button type="button" class="close" role="dialog" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body text-center">
                    <div class="text-center align-self-center">
                        <input id="file-Portrait" type="file" multiple name="file-Portrait" class="file-loading">
                    </div>
                </div>
                <!-- <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">提交更改</button>
                </div> -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- 修改资料模态框 -->
    <div id="msgmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="msgModalLabel"
         aria-hidden="true">
        <form th:messageVo="${UserUpdateVo}" class="needs-validation validateForm" novalidate>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="msgModalLabel">修改资料</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group d-flex">
                            <input style="display: none" type="text" id="id" name="id" th:value="${userVO.id}">
                            <label class="col-sm-3 control-label">用户名：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="username" id="username" th:value="${userVO.username}">
                            </div>
                            <div class="invalid-feedback">
                                用户名不能为空
                            </div>
                        </div>
                        <div class="form-group d-flex">
                            <label class="col-sm-3 control-label">学校：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="school" name="school" th:value="${userVO.school}">
                            </div>
                            <div class="invalid-feedback">
                                学校不能为空
                            </div>
                        </div>
                        <div class="form-group d-flex">
                            <label class="col-sm-3 control-label">学历：</label>
                            <div class="col-sm-8">
                                <select id="education" class="form-control" name="education" th:value="${userVO.education}">
                                    <option th:selected="${userVO.education=='初中'}" value="初中">初中</option>
                                    <option th:selected="${userVO.education=='高中'}" value="高中">高中</option>
                                    <option th:selected="${userVO.education=='专科'}" value="专科">专科</option>
                                    <option th:selected="${userVO.education=='本科'}" value="本科">本科</option>
                                    <option th:selected="${userVO.education=='硕士'}" value="硕士">硕士</option>
                                    <option th:selected="${userVO.education=='博士'}" value="博士">博士</option>
                                </select>
                                <!-- <input type="text" class="form-control" id="education" placeholder="请输入姓"> -->
                            </div>
                        </div>
                        <div class="form-group d-flex">
                            <label class="col-sm-3 control-label">个人简介：</label>
                            <div class="col-sm-8">
                  <textarea class="form-control" rows="3" maxlength="300" id="content" name="content" th:text="${userVO.content}" style="resize: none"
                            placeholder="请在此处介绍你自己"></textarea>
                                <span id="word">0</span><span>/300</span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary valid-button">提交更改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div>
        </form>
    </div><!-- /.modal -->


    <!--所有js必须放在jq下面-->
    <div th:replace="common/header::commonjs(~{::script})">
        <!--        私有的js-->
        <script th:src="@{/plugins/bootstrap-fileinput/js/fileinput.js}"></script>
        <script th:src="@{/plugins/bootstrap-fileinput/js/locales/zh.js}"></script>
        <script th:src="@{/admin/user/index.js}"></script>

    </div>
</div>
<script>
    //修改信息

</script>

</body>
</html>